<?php
/**
 * 头部模板
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 只保留 Tailwind CSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/tailwind.min.css">
    
    <!-- 加载本地 JS -->
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/lucide.min.js"></script>
    <?php if(is_single()): ?>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/highlight.min.js"></script>
    <?php endif; ?>

    <!-- 只保留扫描动画样式 -->
    <style>
        @keyframes scanning {
            0% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(100px); opacity: 0.5; }
            100% { transform: translateY(0); opacity: 1; }
        }
        .scan-line {
            animation: scanning 2s linear infinite;
        }
        
        /* 添加管理员状态下的样式 */
        .admin-bar .site-header {
            top: 32px;
        }
        @media screen and (max-width: 782px) {
            .admin-bar .site-header {
                top: 46px;
            }
        }
    </style>

    
    <!-- 初始化脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化 Lucide Icons
            lucide.createIcons();
            
            // 初始化代码高亮
            <?php if(is_single()): ?>
            hljs.highlightAll();
            <?php endif; ?>
        });
    </script>

    <?php wp_head(); ?>
</head>

<body <?php body_class('bg-gray-50'); ?>>
<?php wp_body_open(); ?>

<!-- 头部导航 -->
<header class="bg-white shadow-sm border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
            <!-- Logo 部分 -->
            <div class="flex items-center space-x-3">
                <div>
                    <?php
                    $site_name = get_bloginfo('name');
                    $first_letter = substr($site_name, 0, 1);
                    ?>
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <span class="text-white text-xl font-bold"><?php echo esc_html($first_letter); ?></span>
                    </div>
                </div>
                <div>
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="text-xl font-bold text-gray-900 hover:text-gray-700">
                        <?php bloginfo('name'); ?>
                    </a>
                </div>
            </div>

            <!-- 搜索框部分 -->
            <div class="hidden md:block flex-1 max-w-2xl mx-8">
                <form role="search" method="get" class="search-form group" action="<?php echo esc_url(home_url('/')); ?>">
                    <div class="relative">
                        <!-- AI 图标 -->
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i data-lucide="sparkles" class="h-5 w-5 text-indigo-500"></i>
                        </div>

                        <!-- 搜索输入框 -->
                        <input type="text" 
                               class="block w-full pl-11 pr-32 py-2.5
                                      bg-white
                                      border border-gray-200
                                      text-gray-900 text-[15px] 
                                      rounded-2xl
                                      placeholder:text-gray-400
                                      transition duration-200
                                      focus:outline-none focus:ring-2 focus:ring-indigo-500/20 
                                      focus:border-indigo-500/30
                                      hover:border-gray-300"
                               placeholder="<?php echo esc_attr_x('输入关键词，AI 为您解答...', 'placeholder', 'ai-content'); ?>"
                               value="<?php echo get_search_query(); ?>"
                               name="s"
                               autocomplete="off"
                               style="pointer-events: auto;">

                        <!-- 右侧装饰元素 -->
                        <div class="absolute inset-y-0 right-0 flex items-center pr-4 space-x-2 pointer-events-none">
                            <!-- 动态光圈效果 -->
                            <div class="w-2 h-2 rounded-full bg-indigo-500/40 animate-pulse"></div>
                            <div class="w-2 h-2 rounded-full bg-indigo-500/40 animate-pulse delay-75"></div>
                            <div class="w-2 h-2 rounded-full bg-indigo-500/40 animate-pulse delay-150"></div>
                            
                            <!-- 分隔线 -->
                            <div class="w-px h-4 bg-gray-200 mx-2"></div>
                            
                            <!-- AI 图标 -->
                            <div class="hidden sm:flex items-center">
                                <i data-lucide="zap" class="h-4 w-4 text-indigo-500"></i>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 微信登录按钮 -->
            <div class="relative hidden md:block">
                <button id="wechat-login-btn" 
                        class="group flex items-center gap-2.5 
                               px-4 py-2.5
                               bg-white hover:bg-gray-50
                               border border-gray-200 hover:border-gray-300
                               rounded-xl
                               text-gray-700
                               shadow-sm
                               transition duration-150
                               focus:outline-none focus:ring-2 focus:ring-green-500/20">
                    <!-- 微信图标 -->
                    <svg class="w-5 h-5 text-[#07C160]" viewBox="0 0 1024 1024" fill="currentColor">
                        <path d="M692.313043 347.269565c11.130435 0 22.26087 0 33.391305 2.226087C696.765217 204.8 540.93913 96 362.852174 96 163.617391 96 0 230.4 0 402.086957c0 98.504348 53.426087 179.478261 142.469565 242.086956l-35.617391 107.73913c-2.226087 6.678261-2.226087 13.356522 2.226087 17.808696 2.226087 2.226087 4.452174 2.226087 8.904348 2.226087 4.452174 0 6.678261-2.226087 8.904348-2.226087l124.121739-62.330435c8.904348-4.452174 20.034783-4.452174 28.93913-2.226087 51.2 15.582609 106.852174 24.486957 160.278261 24.486957 11.130435 0 24.486957 0 35.617391-2.226087-6.678261-22.26087-11.130435-44.521739-11.130435-69.008696 0-149.147826 142.469565-271.026087 316.121739-271.026087h11.130435z m-233.182608-95.165217c26.713043 0 44.521739 17.808696 44.521739 44.521739s-17.808696 44.521739-44.521739 44.521739-53.426087-17.808696-53.426087-44.521739 26.713043-44.521739 53.426087-44.521739z m-262.121739 89.043478c-26.713043 0-53.426087-17.808696-53.426087-44.521739s26.713043-44.521739 53.426087-44.521739 44.521739 17.808696 44.521739 44.521739-17.808696 44.521739-44.521739 44.521739z m800.556521 244.313043c0-142.469565-142.469565-258.782609-302.765217-258.782608-169.182609 0-302.765217 116.313043-302.765217 258.782608 0 142.469565 133.582609 258.782609 302.765217 258.782609 35.617391-2.226087 71.234783-8.904348 106.852174-17.808696 8.904348-2.226087 17.808696-2.226087 24.486957 2.226087l89.043478 53.426087h11.130435c4.452174 0 6.678261-2.226087 8.904348-4.452174 2.226087-2.226087 2.226087-6.678261 2.226087-8.904348l-24.486957-80.13913c-2.226087-6.678261-2.226087-15.582609 2.226087-22.26087 51.2-62.330435 82.365217-116.313043 82.365218-180.591305z m-400.156522-31.165217c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617392s35.617391 17.808696 35.617392 35.617392-17.808696 35.617391-35.617392 35.617391z m196.452174 0c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617392s35.617391 17.808696 35.617391 35.617392-17.808696 35.617391-35.617391 35.617391z"/>
                    </svg>
                    <span class="text-sm font-medium">微信扫码登录</span>
                </button>

                <!-- 二维码弹出框 -->
                <div id="wechat-qr-popup" 
                     class="absolute right-0 mt-2 hidden z-50">
                    <div class="bg-white rounded-xl shadow-lg border border-gray-100/80">
                        <div class="p-6 space-y-6">
                            <!-- 二维码区域 -->
                            <div class="relative">
                                <div class="bg-gray-50/70 p-6 rounded-xl">
                                    <div class="aspect-square bg-white rounded-lg 
                                              ring-1 ring-gray-100
                                              flex items-center justify-center">
                                        <div class="w-44 h-44 p-3">
                                            <div class="w-full h-full 
                                                      bg-gray-50
                                                      rounded-md
                                                      flex items-center justify-center">
                                                <span class="text-sm text-gray-400">二维码加载中...</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 扫描动画 -->
                                    <div class="absolute inset-0 overflow-hidden pointer-events-none rounded-xl">
                                        <div class="scan-line absolute inset-x-0 top-0 h-[2px] 
                                                  bg-gradient-to-r from-transparent via-[#07C160] to-transparent 
                                                  opacity-50"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 扫码提示 -->
                            <div class="text-center space-y-2">
                                <h3 class="text-[15px] font-medium text-gray-800">微信扫码登录</h3>
                                <p class="text-sm text-gray-500">请使用微信扫一扫登录</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden p-2 rounded-lg hover:bg-gray-100">
                <svg class="h-6 w-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
    </div>

    <!-- 移动端搜索框 -->
    <div class="mt-4 md:hidden px-4 pb-4">
        <form role="search" method="get" class="search-form group" action="<?php echo esc_url(home_url('/')); ?>">
            <div class="relative">
                <!-- AI 图标 -->
                <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                    <i data-lucide="sparkles" class="h-5 w-5 text-indigo-500"></i>
                </div>

                <input type="search" 
                       class="block w-full pl-11 pr-4 py-2.5
                              bg-white/[0.95] backdrop-blur-xl
                              border border-gray-200/70
                              text-gray-900 text-[15px]
                              rounded-xl
                              placeholder:text-gray-400
                              transition duration-200
                              focus:outline-none focus:ring-2 focus:ring-indigo-500/20 
                              focus:border-indigo-500/30"
                       placeholder="<?php echo esc_attr_x('AI 智能搜索...', 'placeholder', 'ai-content'); ?>"
                       value="<?php echo get_search_query(); ?>"
                       name="s"
                       autocomplete="off">

                <!-- 搜索聚焦时的装饰光晕 -->
                <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 
                          rounded-[16px] opacity-0 group-focus-within:opacity-100 
                          blur-lg transition duration-500"></div>
            </div>
        </form>
    </div>

    <!-- 移动端微信登录按钮 -->
    <div class="block md:hidden">
        <button onclick="document.getElementById('mobile-wechat-qr').classList.toggle('hidden')"
                class="w-full flex items-center justify-center gap-2.5 
                       px-4 py-3
                       bg-white hover:bg-gray-50
                       border border-gray-200
                       rounded-xl
                       text-gray-700
                       shadow-sm
                       transition duration-150
                       focus:outline-none focus:ring-2 focus:ring-green-500/20">
            <svg class="w-5 h-5 text-[#07C160]" viewBox="0 0 24 24">
                <path fill="currentColor" d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.295a.326.326 0 0 0 .167-.054l1.903-.93a.861.861 0 0 1 .653-.08c.998.332 2.07.5 3.169.5.266 0 .53-.012.791-.03-.772-2.727.06-5.776 2.436-7.562 2.235-1.673 5.52-2.112 8.187-.47-.807-4.005-4.72-7.016-9.475-7.016zm-1.484 4.47a1.036 1.036 0 0 1 0-2.064 1.036 1.036 0 0 1 0 2.064zm4.962 0a1.036 1.036 0 0 1 0-2.064 1.036 1.036 0 0 1 0 2.064zm8.802 3.687c-3.89 0-7.055 2.74-7.055 6.123 0 3.383 3.165 6.124 7.055 6.124.852 0 1.667-.12 2.432-.337.242-.063.52-.036.761.08l1.903.93a.326.326 0 0 0 .167.054c.16 0 .29-.132.29-.295 0-.072-.03-.142-.048-.213l-.39-1.48a.59.59 0 0 1 .213-.664c1.832-1.348 3.002-3.339 3.002-5.55 0-3.383-3.165-6.123-7.055-6.123zm-2.964 5.09a1.036 1.036 0 0 1 0-2.063 1.036 1.036 0 0 1 0 2.064zm5.926 0a1.036 1.036 0 0 1 0-2.063 1.036 1.036 0 0 1 0 2.064z"/>
            </svg>
            <span class="text-sm font-medium">微信扫码登录</span>
        </button>

        <!-- 移动端二维码 -->
        <div id="mobile-wechat-qr" class="hidden mt-3">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100/80">
                <div class="p-6 space-y-6">
                    <!-- 二维码区域 -->
                    <div class="relative">
                        <div class="bg-gray-50/70 p-6 rounded-xl">
                            <div class="aspect-square bg-white rounded-lg 
                                      ring-1 ring-gray-100
                                      flex items-center justify-center">
                                <div class="w-44 h-44 p-3">
                                    <div class="w-full h-full 
                                              bg-gray-50
                                              rounded-md
                                              flex items-center justify-center">
                                        <span class="text-sm text-gray-400">二维码加载中...</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 扫描动画 -->
                            <div class="absolute inset-0 overflow-hidden pointer-events-none rounded-xl">
                                <div class="scan-line absolute inset-x-0 top-0 h-[2px] 
                                          bg-gradient-to-r from-transparent via-[#07C160] to-transparent 
                                          opacity-50"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 扫码提示 -->
                    <div class="text-center space-y-2">
                        <h3 class="text-[15px] font-medium text-gray-800">微信扫码登录</h3>
                        <p class="text-sm text-gray-500">请使用微信扫一扫登录</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 分类导航 -->
<nav class="bg-white border-b border-gray-100 mt-[1px]">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center space-x-4 overflow-x-auto py-2 no-scrollbar">
            <?php
            $categories = get_categories(array(
                'orderby' => 'name',
                'order'   => 'ASC',
                'hide_empty' => false,
                'exclude' => array(1)
            ));
            
            if (!empty($categories)) {
                foreach ($categories as $category) {
                    $is_active = is_category($category->term_id);
                    $active_class = $is_active 
                        ? 'text-gray-900 bg-gray-200 rounded-full' 
                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-all duration-200';
                    echo sprintf(
                        '<a href="%s" class="relative text-[14px] font-medium px-3.5 py-1.5 whitespace-nowrap %s">%s</a>',
                        get_category_link($category->term_id),
                        $active_class,
                        $category->name
                    );
                }
            }
            ?>
        </div>
    </div>
</nav>

<!-- 主要内容区域 -->
<main>
    <div class="flex flex-wrap lg:flex-nowrap gap-8">
        <!-- ... 主要内容 ... -->
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loginBtn = document.getElementById('wechat-login-btn');
    const qrPopup = document.getElementById('wechat-qr-popup');
    
    // 点击按钮显示/隐藏二维码
    loginBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        qrPopup.classList.toggle('hidden');
    });
    
    // 点击其他地方关闭二维码
    document.addEventListener('click', function(e) {
        if (!qrPopup.contains(e.target) && !loginBtn.contains(e.target)) {
            qrPopup.classList.add('hidden');
        }
    });
    
    // 鼠标悬停也显示二维码
    loginBtn.addEventListener('mouseenter', function() {
        qrPopup.classList.remove('hidden');
    });
    
    // 鼠标离开整个区域才隐藏
    const loginContainer = loginBtn.parentElement;
    loginContainer.addEventListener('mouseleave', function() {
        qrPopup.classList.add('hidden');
    });

    // 初始化 Heroicons
    const icon = document.querySelector('.h-5.w-5');
    if (icon) {
        icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
        </svg>`;
    }
});
</script> 
</div><!-- #content -->
</div><!-- .content-wrapper -->

</body>
</html> 